<template>
	<view class="wrapper">

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="orderItem" v-for="(item, index) in orderList" :key="item.orderNo">
				<view class="topContent">
					<text class="orderTime">{{item.createTime}}</text>
					<text class="orderStatus">{{item.orderStatus|longOrderStatus}}</text>
				</view>
		<!-- 		<view class="otherContent">
					<text class="title">订单编号: </text>
					<text class="value">{{item.orderNo}}</text>
				</view> -->
				<view class="otherContent">
					<text class="title">取还门店: </text>
					<text class="value">{{item.reserveStoreName}}</text>
					<text class="amount" v-if="item.amount>0 && item.orderStatus !=8">待支付¥{{item.amount}}</text>
				</view>
				<view class="otherContent">
					<text class="title">预定车型: </text>
					<text class="value">{{item.modelName}}</text>
				</view>
				<view class="otherContent">
					<text class="title">用车时间: </text>
					<text class="value">{{item.rentalStartTime + '至' + item.rentalEndTime}}</text>
					<text class="rent">¥{{item.rent}}</text>
				</view>
				<view class="otherContent">
					<text class="title">付款方式: </text>
					<text class="value">{{item.methodPayment}}</text>
					<text class="remark" v-if="item.remark.length > 0">{{'(' + item.remark + ')'}}</text>
				</view>
				<view class="hint" v-if="item.hint.length > 0">
					{{item.hint}}
				</view>
				<view class="bottomBtnWrapper">
					<view v-if="item.orderStatus == 0" class="buttonBox" @tap="clickCancleOrder(item.orderNo)">
						取消订单
					</view>
					<view v-if="item.orderStatus == 1" class="buttonBox" @tap="clickRefundOrder(item.orderNo)">
						退款
					</view>
					<view class="buttonBox" @tap="goOrderDetail(item.orderNo)">
						详情
					</view>
				</view>


			</view>

		</mescroll-body>

		<u-modal title="提示" content="您确定取消订单吗" :show="showCanleAlert" showCancelButton @confirm="confirmCancle()"
			@cancel="showCanleAlert = false">
		</u-modal>

		<u-modal title="提示" content="您确定退款吗" :show="showRefoundAlert" showCancelButton @confirm="confirmRefound()"
			@cancel="showRefoundAlert = false">
		</u-modal>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiOrderLongList,
		cancelOrder,
		refundOrder
	} from '@/api/longOrder-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				orderList: [],
				showCanleAlert: false,
				showRefoundAlert: false,
				currentOrderNo: ''
			}
		},
		onLoad() {
			uni.$on('refreshLongOrder', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			upCallback(page) {
				apiOrderLongList({
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
					this.orderList = this.orderList.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击了取消订单按钮
			clickCancleOrder(orderNo) {
				this.showCanleAlert = true;
				this.currentOrderNo = orderNo;
			},
			//取消订单
			confirmCancle() {
				this.showCanleAlert = false;
				cancelOrder(this.currentOrderNo).then(res => {
					if (res.code == 200) {
						this.mescroll.triggerDownScroll();
						uni.showToast({
							title: '订单取消成功',
							icon: 'success'
						})
					}
				})
			},

			//点击了退款按钮
			clickRefundOrder(orderNo) {
				this.showRefoundAlert = true;
				this.currentOrderNo = orderNo;
			},
			//退款
			confirmRefound() {
				this.showRefoundAlert = false;
				refundOrder(this.currentOrderNo).then(res => {
					if (res.code == 200) {
						this.mescroll.triggerDownScroll();
						uni.showToast({
							title: '订单退款成功',
							icon: 'success'
						})
					}
				})
			},

			//订单详情
			goOrderDetail(orderNo) {
				uni.navigateTo({
					url: './longOrder-detail?orderNo=' + orderNo
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		margin: 28upx 20upx;
	}

	.orderItem {
		background-color: $bg-white-color;
		position: relative;
		padding: 30upx;
		margin-bottom: 10upx;
		border-radius: 16upx;

	}

	.topContent {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.orderTime {
			font-size: 26upx;
			color: $text-color-33;
		}

		.orderStatus {
			font-size: 26upx;
			color: $text-color-33;
		}
	}

	.otherContent {
		position: relative;
		margin-bottom: 10upx;

		.title {
			font-size: 24upx;
			color: $text-color-99;
		}

		.value {
			font-size: 24upx;
			color: $text-color-33;
		}
		.remark {
			font-size: 24upx;
			color: $main-color;
			margin-left: 10upx;
		}
		.rent {
			position: absolute;
			right: 10upx;
			top: 8upx;
			color: $text-color-33;
			font-size: 26upx;
		}
		.amount {
			position: absolute;
			right: 10upx;
			top: 8upx;
			color: $text-color-price;
			font-size: 26upx;
		}
	}

	.hint {
		font-size: 24upx;
		color: #EC4863;
		margin-bottom: 10upx;
	}

	.bottomBtnWrapper {
		display: flex;
		justify-content: flex-end;

	}

	.buttonBox {
		width: 130upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: $text-color-ff;
		font-size: 26upx;
		font-weight: bold;
		background-color: $main-color;
		margin-left: 16upx;
		border-radius: 30upx;

	}
</style>
